<template>
  <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
      label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="活动标题" prop="title">
            <el-input v-model="dataForm.title" placeholder="活动标题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动状态" prop="state">
            <el-select
              v-model="dataForm.state"
              placeholder="活动状态"
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="dict in statusList"
                :key="Number(dict.value)"
                :label="dict.label"
                :value="Number(dict.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
              style="width: 100%;"
              v-model="dataForm.startTime"
              type="datetime"
              placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="startTime">
            <el-date-picker
              style="width: 100%;"
              v-model="dataForm.endTime"
              type="datetime"
              placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动说明" prop="remark">
            <el-input v-model="dataForm.remark" placeholder="活动说明" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="活动商品">
             <el-select filterable v-model="checkedGoods" placeholder="请选择" @change="addGoods" style="margin-bottom:22px">
              <el-option
                v-for="item in goodsList"
                :key="item.id"
                :label="item.name"
                :disabled="item.disabled"
                :value="item.id">
              </el-option>
            </el-select>
            <el-table border height="280" :data="dataForm.timeLimitedPromotionDetailList" style="width:100%">
              <el-table-column prop="name" label="商品名称" />
              <el-table-column prop="discount" label="折扣率">
                <template slot-scope="scope">
                  <el-input-number :precision="2" :step="0.01" :min="0" :max="1"
                    v-model="scope.row.discount" size="mini" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="140">  
                <template slot-scope="scope">
                  <el-link type="danger" @click="delGoods(scope.$index)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    addOrUpdate
  } from "@/api/business/timeLimite";
  import {
    page as getGoods,
    getById
  } from "@/api/business/goods/goods";
  export default {
    dicts: ['sys_user_sex','sys_normal_disable'],
    data() {
      return {
        title: '',
        visible: false,
        checkedGoods:'',
        dataForm: {
          id: 0,
          title: '',
          startTime:'',
          endTime:'',
          remark: '',
          state: 0,
          timeLimitedPromotionDetailList:[]
        },
        statusList:[{
          value:'0',
          label:'未开启'
        },{
          value:'1',
          label:'开启'
        },{
          value:'2',
          label:'关闭'
        },{
          value:'3',
          label:'结束'
        }],
        dataRule: {
          title: [{
            required: true,
            message: '活动标题',
            trigger: 'blur'
          }],
          state: [{
            required: true,
            message: '请选择活动状态',
            trigger: 'blur'
          }],
          startTime: [{
            required: true,
            message: '请选择开始时间',
            trigger: 'blur'
          }],
          endTime: [{
            required: true,
            message: '请选择结束时间',
            trigger: 'blur'
          }],
          remark: [{
            required: true,
            message: '请输入活动说明',
            trigger: 'blur'
          }],
        },
        goodsList:[]
      }
    },
    methods: {
      init(record) {
        this.visible = true
        this.dataForm = record
        if (this.dataForm && this.dataForm.id) {
          this.title = '限时优惠' + '修改'
        } else {
          this.title = '限时优惠' + "新增"
          this.dataForm.timeLimitedPromotionDetailList = new Array()
          this.dataForm.state = 0
        }
        getGoods({
          pageSize:1000,
          pageNum:1,
          search:{}
        }).then(res=>{
          this.goodsList = res.data.list;
        })
      },
      addGoods(e){
        var i;
        this.goodsList.forEach((item,index)=>{
          if(item.id == e){
            i = index;
          } 
        })
        console.log(i,this.goodsList[i])
        this.goodsList[i].disabled = true;
        this.dataForm.timeLimitedPromotionDetailList.push({
            name:this.goodsList[i].name,
            goodsId:this.goodsList[i].id,
            discount:1
          })
        
      },
      delGoods(e){
        this.dataForm.timeLimitedPromotionDetailList.splice(e,1)
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            addOrUpdate(this.dataForm).then(res => {
              this.visible = false
              this.$modal.msgSuccess(this.title + "成功");
              this.$emit('refreshDataList')
            })
          }
        })
      }
    }
  }
</script>
